module.exports = function () {
    return `<html>
    <head>
        <style>
            @keyframes myAnimation {
                0% {
                    opacity: 0
                }
                100% {
                    opacity: 1
                }
            }
            body{
                background: #fff;
                color: #333;
            }
            .card{
                border: 1px solid #999;
                border-radius: 3px;
                margin: 10px;
                display: inline-block;
                padding: 10px 20px;
                width: 180px;
            }
            input:hover,
            .card:hover{
                cursor: pointer;
            }
            strong{
                padding-bottom: 10px;
                display:block;
                height: 30px;
            }
            button:hover{
                cursor: pointer;
            }
            .staus{
                width: 10px;
                height: 10px;
                border-radius: 10px;
                display: inline-block;
                background: #eee;
            }
            .staus.run{
                background: #390;
                animation: myAnimation 1s infinite;
            }
            .staus.error{
                background: #e33100;
            }
            .top-bar{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 10px;
            }
            .page-bar{
                padding: 20px 10px 0;
            }
            .page-bar button.first-child{
                margin-left: 10px
            }
        </style>
        <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
    </head>
    <body>
        <div id="app">
            <div v-if="list.length" class="page-bar" style="">
                <input type="checkbox" @click.stop="checkAll" :checked="checkAllItem"  /> 全选
                <button @click="startAll" class='first-child'>启动所选</button>
                <button @click="stopAll">停止所选</button>
            </div>
            
            <br/>
            <div class="card" v-for='item of list' :key='item.id' @click='showTerminal(item)'>
                <div class='top-bar'>
                    <input type="checkbox" @click.stop="checkAllItem = false; item.check = !item.check" :checked="item.check"  />
                    <span class="staus" :class="{'run' : item.run, 'error': item.error}"></span>
                </div>
                <strong>{{item.name}}</strong>
                <div>
                    <button v-if="!item.run" @click.stop='start(item)'>启动</button>
                    <button v-if="item.run" @click.stop='restart(item)'>重启</button>
                    <button v-if="item.run" @click.stop='stop(item)'>停止</button>
                    <button @click.stop='openProject(item)'>打开项目</button>
                </div>
            </div>
        </div>
        <script>
            const vscode = acquireVsCodeApi();
            new Vue({
                el: "#app",
                data: {list: [], checkAllItem : false},
				mounted(){
					window.addEventListener('message', event => {
						const message = eval(event.data);
						this.list = message.map( v => {
                            v.run = false;
                            v.check = false;
                            v.error = false;
                            return v;
                        });
					});
				},
                methods: {
                    start(item){
                        vscode.postMessage({type: 'start' , data: item});
                        item.run = true;
                    },
                    restart(item){
                        vscode.postMessage({type: 'restart' , data: item});
                    },
                    stop(item){
                        vscode.postMessage({type: 'stop' , data: item});
                        item.run = false;
                        item.error = false;
                    },
                    startAll(){
                        this.list.filter(v => v.check).map( v => this.start(v))
                    },
                    stopAll(){
                        this.list.filter(v => v.check).map( v => this.stop(v))
                    },
                    openProject(item){
                        vscode.postMessage({type: 'openProject' , data: item});
                    },
                    showTerminal(item){
                        vscode.postMessage({type: 'showTerminal' , data: item});
                    },
                    checkAll(){
                        this.checkAllItem = !this.checkAllItem
                        this.list = this.list.map(v => {
                            v.check = this.checkAllItem
                            return v;
                        })
                    }
                }
           })
        </script>
    </body></html>`
}
